<template>
	<view>
		<!-- 头部 -->

		

		  <!-- end -->
		

		  <!-- 流量数量 -->



		  
		  <!-- 评论标题 -->
		    <view class='comment  padding-sm bg-white'>
		      <text>评论</text>
		    </view>
		    <!-- end -->
		  
		  

		  

		   
		   

		     <view class='padding shadow-warp  bg-white comment-content' v-for="(item,index) in discuss" :key="index">
		       <view class='comment-content-1'>
		         <view class='comment-content-1_image'>
		           <image :src='item.icon'></image>
		         </view>
		         <view class='comment-content-1_2'>
		           <text class='text-black'>{{item.user_name}}</text>
		         </view>

		       </view>
		   
		       <view class='comment-content-2'>
		         <view class='comment-content-2_1'>

		           <text class='text-black text-df text-weight'> {{item.content}}</text>
		         </view>
		         <view class='comment-content-2_2 margin-top-sm'>
		           <text class='text-sm'>{{item.time}}</text>
		         </view>
		   

		   
		       </view>


		   
		  

			  <!-- end -->
			
			
			<!-- padding30 margin30 end -->
		  </view>
		  <!--  -->
		  <view class='lines'></view>
		  <!--  -->
		  <!-- 底部操作卡 -->
		  <view class=' bg-white'>
		  
		    <view class='msg_bottom bg-white'>
		      <view class='msg_bottom-1'>
		        <input name='msg' placeholder='觉得不错说两句~~' cursor-spacing='10' v-model="com"></input>
		      </view>
<!-- 		      <view class='msg_bottom-2'>
		        <text class='cuIcon-message text-icon  lg text-black'></text>
		        <text class='text-char'> 166</text>
		      </view>
		      <view class='msg_bottom-3'>
		        <text class='cuIcon-appreciate text-icon lg text-black'></text>
		        <text class='text-char'> 1688</text>
		      </view> -->
			  <button type="primary" class="margin-center-xl" @tap="comment">评论</button>
		    </view>
			
		  
		  </view>
		
		  
		 
		  
	</view>
</template>

<script>
	// import data from '../../../datas/data.json'
	import store from '../../../globalStore/store.json'
	import getDate from '../../component/getNowFormatDate.js'
	export default {
		data() {
			return {
				    //图片
					loading:false,
					page:1,
					post_data:{},

				    // end
					// 评论内容
					discuss:[],
					com:"",
					user_id:"",
					post_id:""
			}
		},
		onLoad(options) {
			this.post_id=options.post_id;
			let that=this;
			this.loadComments(this.post_id,parseInt(this.page),10);
			// let posts=data.posts;
			// this.user_id=options.user_id;
			// console.log(this.user_id);
			// for(let i=0; i<posts.length; i++){
			// 	if(posts[i].post_id==post_id){
			// 		this.discuss=posts[i].comments;
			// 		this.post_data=posts[i];
			// 		this.imgArr=this.post_data.imgs;
			// 		break;
			// 	}
			// }
		},
		onShow() {
	
		},
		//下拉刷新
		onPullDownRefresh:function() {
			//模拟加载完成
			this.page=1;
			this.discuss=[];
			this.loadComments(this.post_id,parseInt(this.page),10);
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 2000);
		},
		//上拉刷新
		onReachBottom:function(){
			this.page++;
			uni.showLoading();

			setTimeout(function () {
				uni.hideLoading();
			}, 2000);
			this.loadComments(this.post_id,parseInt(this.page),10);
			
		},
		methods: {
			 toUserMain(){
				 uni.navigateTo({
				 	url:'../../user-detail/user-detail?user_id='+this.user_id
				 })
			 },
			 getMore(){
				this.page++;
				this.loadComments(this.post_id,parseInt(this.page),10);
			 },
			 loadComments(post_id,page,page_size){
				 var that=this;
				 uni.showLoading();
				 
				 setTimeout(function () {
				 	uni.hideLoading();
				 }, 2000);
				uniCloud.callFunction({
					name:"getComments",
					data:{
						"post_id":this.post_id,
						"page":page,
						"page_size":page_size
					},
					success(res) {
						let l=res.result.lists
						if(l.length!=0){
							that.discuss=that.discuss.concat(l);
						}
					},
					fail(err){
						console.log(err)
					}
				})				 
			 },
			  // 点击图片打开详细
			  previewImg: function (e) {
			    // console.log(e.currentTarget.dataset.index);
			    var index = e.currentTarget.dataset.index;
			    var imgArr = this.imgArr;
			    uni.previewImage({
			      current: imgArr[index],     //当前图片地址
			      urls: imgArr,               //所有要预览的图片的地址集合 数组形式
			      success: function (res) { },
			      fail: function (res) { },
			      complete: function (res) { },
			    })
			  },
			  
			  
			  // 跳转回复留言详细
			  // toDiscover_desc:function(){
				 //  uni.navigateTo({
				 //  	url:"/pages/disconver/discover_desc_more/discover_desc_more"
				 //  })
			  // },

			  comment(){
				  this.loading=true;
				  this.discuss=[];
				  let com={
					"p_id":this.post_id,
					"user_id":store.user.user_id,
					"user_name":store.user.user_name,
					"icon":store.user.icon,
					"content":this.com,
					"time":getDate()
					  
				  };
				  var that=this;
				  console.log(com);
				  uniCloud.callFunction({
				  	name:"commentPost",
					data:com,
					success(res) {
						that.com="";
						uniCloud.callFunction({
							name:"getComments",
							data:{
								"post_id":that.post_id,
								"page":1,
								"page_size":10
							},
							success(res) {
								that.discuss=that.discuss.concat(res.result.lists);
								that.loading=false;
							}
						})
					}
				  })
				  // this.post_data.comments.push(com);
				  // this.post_data.comment_count++;
			  }
			  
		},
		// onBackPress() {
		// 	let id=this.post_data.post_id;
		// 	for(let i=0; i<data.posts.length; i++){
		// 		if(data.posts[i].post_id==id){
		// 			data.posts[i]=this.post_data;
		// 			break;
		// 		}
		// 	}
		// },
		onHide() {
			// console.log("hide");
		}
	}
</script>

<style scoped>
	.get-more-com{
		width: 80%;
		margin-top: 4%;
		margin-bottom: 14%;
	}
	.focused{
		width: 100%;
		font-size: 10px;
		background: #fd6c68;
		color: white;
	}
	.pg{
	  padding:5rpx 20rpx 20rpx 20rpx;
	}
	.radius-sm{
	  border-radius: 20rpx;
	}
	/* 头部 */
	.user-top{
	  width: 100%;
	  height: 100rpx;
	  display: flex;
	  align-items: center;
	  border-top-left-radius: 20rpx;
	  border-top-right-radius: 20rpx;
	  margin-top: 20rpx;
	  
	}
	.user-top-1 image{
	height: 80rpx;
	width: 80rpx;
	border-radius: 100%;
	}
	.user-top-2{
	  margin-left: 20rpx;
	  width: 65%;
	}

	/* end */

	/* 文字 */
	.character{
	  width: 100%;
	  height: auto;
	  padding-top: 20rpx;
	  display: flex;
	}
	.character text{
	  font-weight: 550;
	  font-size: 30rpx;
	  width: 100%;
	   word-wrap: break-word;
		word-break: normal;
		line-height: 40rpx;
	}
	/* end */


	/* 九宫图 */
	.container-grid{
	  display: flex;
	  flex-wrap: wrap;
	  width: 100%;

	}
	.container-grid__image{
	  height: 210rpx;
	  width: 220rpx;
	  border-radius: 10rpx;
	}
	.container-grid_img{
	  width: 223rpx;
	  border-radius: 10rpx;  
	}
	.container-grid_image{
	  margin-right: 10rpx;
	  width: 32%;
	}
	.container-grid_image-1{
	   margin-right: 10rpx;
	  width: 100%;
	}
	/* end */

	/* 底部浏览量 */
	.browse{
	  width: 100%;
	  height: 100rpx;
	  padding-top: 20rpx;
	  display: flex;
	  align-items: center;
	  mask-border: 20rpx;
	  border-bottom-left-radius: 20rpx;
	  border-bottom-right-radius: 20rpx;
	}
	.browse text{
	  font-size: 25rpx;
	}
	.img-size{
	  height: 80rpx;
	  width: 80rpx;
	}
	.cu-avatar.lg{
	  width: 60rpx;
	  height: 60rpx;
	}
	.browse-2{
	  width: 46%;
	}
	/* end */

	/* 评论 */
	.comment{
	  margin-top: 20rpx;
	  width: 100%;
	  height: 100rpx;
	  border-top-left-radius: 20rpx;
	  border-top-right-radius: 20rpx;
	}
	.comment{
	  color:black;
	  font-size: 32rpx;
	  display: flex;
	  align-items: center;
	  /* justify-content: center; */
	}
	/* end */


	/* 评论内容 */
	.comment-content{
	  width: 100%;
	  height: auto;

	}
	.comment-content-2_1_img{
	  height: 36rpx;
	  width: 65rpx;
	  line-height: 40rpx;
	}
	.comment-content-1{
	  display: flex;
	  align-items: center;
	}
	.comment-content-1_image image{
	  height: 50rpx;
	  width: 50rpx;
	  border-radius: 100%;
	}
	.comment-content-1_2{
	  margin-left: 20rpx;
	  width: 80%;
	}
	.comment-content-2{
	  margin-left: 10%;
	}
	/* end */

	/* 评论留言 */
	.leave{
	  padding: 20rpx;
	  height: auto;
	  width: 100%;
	  background:#f1f1f1;
	  margin-top: 20rpx;
	  border-radius: 20rpx;
		 word-wrap: break-word;
		word-break: normal;
		line-height: 40rpx;
	}
	.leave-item{
	  margin-top: 20rpx;
	  color: black;
	}
	/* end */


	/* line */
	.line{
	  width: 100%;
	  height: 0.5rpx;
	  background: gainsboro;
	  margin-top: 20rpx;
	}
	/* end */


	/* 底部选项卡 */
	.msg_bottom{
	  padding: 20rpx;
	  width: 100%;
	  height: 100rpx;
	  position: fixed;
	  bottom: 0;
	  z-index: 99;
	  display: flex;
	  align-items: center;
	}
	.lines_msg{
	  display: flex;
	  height: 10rpx;
	}
	.msg_bottom-1{
	  width: 55%;
	  background: #f1f1f1;
	  border-radius: 40rpx;
	  padding: 10rpx 20rpx 10rpx 20rpx;
	  display: flex;
	  align-items: center;
	}
	.msg_bottom-2{
	  width: 20%;
	  margin-left: 20rpx;
	}
	.text-icon{
	  font-size: 45rpx;
	}
	.text-char {
	  font-size: 35rpx;
	}
	/* end */

	.lines{
	  display: flex;
	  height: 150rpx;
	}



</style>
